<template>
  <el-main>
    <el-tabs v-model="activeName" @tab-click="handleClick">
      <div class="flex" style="margin-bottom: 20px; justify-content: space-between">
        <div>
          <el-button type="primary" @click="excellentImportType">导入</el-button>
          <!-- <el-select v-model="year" placeholder="年份" @change="listSearch($event,1)" clearable>
            <el-option v-for="item in yearLists" :key="item" :label="item" :value="item">
            </el-option>
          </el-select>
          <el-select v-model="honor" :placeholder="importState == 1 ? '奖项' : '类型'" @change="listSearch($event,2)" clearable>
            <el-option
              v-for="item in honorListData"
              :key="item.id"
              :label="item.name"
              :value="item.name"
            >
            </el-option>
          </el-select> -->
          <el-input placeholder="关键词搜索" v-model="keyword" @change="getsearch">
            <i slot="suffix" class="el-input__icon el-icon-search" @click="getsearch"></i>
          </el-input>
        </div>

        <el-button type="primary" @click="exportFile">导出</el-button>
      </div>
      <el-tab-pane label="专利奖" name="patent">
        <patent
          :keyword="keyword"
          :total="total"
          :page="page"
          :limit="limit"
          :tableData="tableData"
          @currentChange="currentChange"
        ></patent>
      </el-tab-pane>
      <el-tab-pane label="示范企业" name="company">
        <company
          :keyword="keyword"
          :total="total"
          :page="page"
          :limit="limit"
          :tableData="tableData"
          @currentChange="currentChange"
        ></company>
      </el-tab-pane>
    </el-tabs>

    <el-dialog :visible.sync="excellentImport" width="25%" :destroy-on-close="true">
      <div>
        <div>
          <div style="margin-bottom: 30px">
            <div class="sq_tilte4 sq_tilte_color" style="margin-bottom: 20px">
              1.请先下载导入文件
            </div>
            <el-button type="primary" style="padding: 8px 20px">
              <a
                v-if="activeName == 'patent'"
                :href="`https://visit.oramage.com/template/奖项导入模板.xlsx`"
                >下载模板</a
              >
              <a v-else :href="`https://visit.oramage.com/template/优势企业导入模板.xlsx`"
                >下载模板</a
              >
            </el-button>
          </div>
          <div style="margin-bottom: 30px">
            <div class="sq_tilte4 sq_tilte_color" style="margin-bottom: 20px">
              2.请上传填写好的文件
            </div>
            <el-upload
              class="upload-demo"
              :action="action"
              :on-success="handleChange"
              :on-exceed="handleExceed"
              :on-remove="handleRemove"
              :before-remove="beforeRemove"
              :file-list="fileListUpload"
              :limit="limitUpload"
            >
              <el-button type="primary" style="padding: 7px 34px"> 上传 </el-button>
            </el-upload>
          </div>
        </div>
        <div>
          <el-button
            class="pubBtn"
            style="width: 100%; margin: 40px 0; height: 44px"
            type="button"
            @click="enterExe"
          >
            导入
          </el-button>
        </div>
      </div>
    </el-dialog>

   
  </el-main>
</template>

<script>
import {
  honorcompanyList,
  honorCompany,
  yearList,
  honorType,
  exportHonorCompany,
} from "@/api/configApi";
import { mapGetters } from "vuex";
import { VUE_APP_BASE_API } from "@/config.js";
import patent from "./components/patent";
import company from "./components/company";
export default {
  components: {
    patent,
    company,
  },
  computed: {
    ...mapGetters(["type"]),
  },
  data() {
    return {
      successList: [],
      action: VUE_APP_BASE_API + "/v1/config/upload_local",
      page: 1,
      limitUpload: 1,
      limit: 10,
      total: 0,
      region_id: this.$store.state.user.region_id,
      currentUserdata: {},
      tableData: [],
      excellentImport: false,
      fileListUpload: [],
      activeName: "patent",
      year: "",
      honor: "",
      yearLists: [],
      honorListData: [],
      keyword: "",
      importState: 1, //1 为专利导入 2为示范企业导入
    };
  },
  async mounted() {
    this.getuserList();
    // this.yearList();
    // this.honorType();
  },
  methods: {
    exportHonorCompany() {
      exportHonorCompany({
        type: this.importState,
        year: year,
        name: honor,
        keyword: this.keyword,
      }).then((res) => {
        console.log(res, "adsajsd");
      });
    },
    exportFile() {
      window.open(
        VUE_APP_BASE_API +
          `/v1/export/honorCompany?type=${this.importState}&keyword=${this.keyword}`,
        "_blank"
      );
    },
    excellentImportType() {
      this.excellentImport = true;
    },
    async listSearch(value, type) {
      console.log(value, type);
      console.log(this.year, this.honor);
      await this.getuserList();
    },
    honorType() {
      honorType({
        type: this.importState,
      }).then((res) => {
        this.honorListData = res;
      });
    },
    yearList(id) {
      yearList({}).then((res) => {
        this.yearLists = res.years;
      });
    },
    handleClick(tab, event) {
      if (tab.name == "patent") {
        this.importState = 1;
      } else if (tab.name == "company") {
        this.importState = 2;
      }

      this.page = 1;
      this.keyword = "";
      this.getuserList();
    },
    enterExe() {
      honorCompany({
        file: this.fileListUpload[0].url,
        type: this.importState,
      }).then(async (res) => {
        this.fileListUpload = [];
        this.excellentImport = false;
       
        this.$message({
          message: "导入成功",
          type: "success",
        });
        await this.getuserList();

        // setTimeout(async () => {
        //   await this.getuserList();
        // }, 50);
      });
    },
    handleExceed(files, fileList) {
      this.$message.warning(
        `当前限制选择1个文件，本次选择了 ${files.length} 个文件，共选择了 ${
          files.length + fileList.length
        } 个文件`
      );
    },
    handleRemove(file, fileList) {
      // console.log(file)
      this.fileListUpload = [];
    },
    beforeRemove(file, fileList) {
      return this.$confirm(`确定移除 ${file.name}？`);
    },
    handleChange(file, fileList) {
      let obj = {
        name: file.data.file_name,
        url: file.data.url,
      };
      this.fileListUpload.push(obj);
      console.log(file, fileList, "变化");
      console.log(this.fileListUpload, "变化");
    },
    currentChange(page) {
      this.page = page;
      this.getuserList();
    },
    getsearch(keyword) {
      this.getuserList();
    },
    getuserList() {
      honorcompanyList({
        type: this.importState,
        page: this.page,
        limit: this.limit,
        keyword: this.keyword,
      }).then((res) => {
        this.tableData = res.list;
        this.total = res.count;
      });
    },
  },
};
</script>

<style scoped lang="less">
.el-main {
  margin: 30px 15px;
}
::v-deep .el-input {
  width: initial;
}
</style>
